import { Component } from 'react'
import {View, Text } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'

export default class LgProgress extends Component {
  constructor (props) {
    super(props)
  }
  state = {
    subStyle: {width: 0}
  }

  componentDidMount () {
    var that = this;
    setTimeout(() => {
      var props = that.props;
      var subStyle = props.style || {};
      if (props.height) {
        subStyle.borderRadius = Taro.pxTransform(props.height / 2);
      }
      subStyle.width = (props.progress / props.total * 100) + "%";
      that.setState({subStyle: subStyle});
    }, 500)
  }
  componentWillReceiveProps (np) {
    if (np.progress != this.props.progress) {
      var subStyle = this.state.subStyle;
      subStyle.width = (np.progress / this.props.total * 100) + "%";
      this.setState({subStyle: subStyle});
    }
  }
  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  render () {
    var props = this.props; 
    var className = props.className || "", 
        style = props.style || {};
    if (props.type) className += " lg_progress_type1";
    if (props.height) {
      var radius = Taro.pxTransform(props.height / 2);
      style.borderRadius = radius;
      style.height = Taro.pxTransform(props.height);
    }
    if (props.width) {
      style.width = Taro.pxTransform(props.width);
    }
    var progress = props.progress || 0, total = props.total || 0;
    return (
      <View className={"lg_progress_warp" + (props.showData ? " lg_progress_show_data" : "")}>
        <View className={"lg_progress " + className} style={style}>
            <View className="lg_progress_sub" style={this.state.subStyle} />
        </View>
        {props.showData && (<Text className="lg_progress_data">{props.progress}/{props.total}</Text>)}
      </View>
    )
  }
}